<template>
  <el-form ref="form" label-width="80px">
    <el-form-item label="标题">
      <el-input v-model="labelTitle"></el-input>
    </el-form-item>
    <el-form-item label="提示语">
      <el-input v-model="placeholder"></el-input>
    </el-form-item>
    <el-form-item label="name">
      <el-input v-model="inputName"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  name: 'InputProp',
  props: ['instanceId'],
  computed: {
    labelTitle: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['labelTitle']
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'labelTitle',
          value: value
        })
      }
    },
    inputName: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['inputName']
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'inputName',
          value: value
        })
      }
    },
    placeholder: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['placeholder']
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'placeholder',
          value: value
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
